<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    #box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      /*
        * 开启box1的绝对定位
        */
      position: absolute;
    }
  </style>

  <script type="text/javascript">
    window.onload = function () {
      /*
       * 使div可以跟随鼠标移动
       */

      //获取box1
      var box1 = document.getElementById("box1");

      //给整个页面绑定：鼠标移动事件
      document.onmousemove = function (event) {
        console.log(scroll());
        //兼容的方式获取event对象
        event = event || window.event;

        // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
        var pagex = event.pageX || scroll().left + event.clientX;
        var pagey = event.pageY || scroll().right + event.clientY;

        //   设置div的偏移量（相对于整个页面）
        // 注意，如果想通过 style.left 来设置属性，一定要给 box1开启绝对定位。
        box1.style.left = pagex + "px";
        box1.style.top = pagey + "px";
      };
    };

    // scroll 函数封装
    function scroll() {
      return {
        //此函数的返回值是对象
        left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
        right:
          window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
      };
    }
  </script>
</head>

<body style="height: 1000px;width: 2000px;">
  <div id="box1"></div>
</body>

</html>